<template>
  <div class="fast-buy">
    <!-- 今日必抢 -->
    <div class="fast-buy__header" px-10 py-10>
      <Magazine
        style="min-height: 150px"
        image="https://s10.mogucdn.com/mlcdn/c45406/201015_45l80j09ebiaki64i8d5309j1hg83_702x426.png"
        bor-7
        py-10
        px-10
      >
        <div pb-10 d-flex-center>
          <div class="fast-buy__header__title" fz-18 text-tertiary font-feichi>
            今日必抢
          </div>
          <div
            class="fast-buy__header__desc"
            ml-10
            px-10
            py-2
            fz-12
            text-tertiary
          >
            一件也是批发价
          </div>
        </div>
        <div class="fast-buy__header__good" d-flex-center style="justify-content: space-between;">
          <BoxSkin v-for="item in hotGoodList" style="width: 31.5%;overflow: hidden;" bor-5>
            <Magazine :image="item.image" style="height: 90px">
              <div
                class="fast-buy__header__sell"
                text-tertiary
                bga-3
                py-2
                px-4
                bor-7
              >
                &nbsp;&nbsp;{{ item.sell }}&nbsp;
              </div>
            </Magazine>
            <div ellipsis-1 px-2>{{ item.des }}</div>
            <div d-flex-center px-2 style="justify-content: space-between">
              <div fz-12>
                <div class="fast-buy__header__price">{{ item.price }}</div>
                <div class="fast-buy__header__oldprice">
                  ￥{{ item.oldprice }}
                </div>
              </div>
              <div circle bg-tertiary px-3 py-3 mr-10 text-tertiary>抢</div>
            </div>
          </BoxSkin>
        </div>
      </Magazine>
    </div>
    <!-- 时间轴 -->
    <Magazine
      image="https://s10.mogucdn.com/mlcdn/c45406/201104_872b0le054e822e6hh4fcjf95fl92_750x117.png"
    >
      <div class="time" d-flex-center>
        <div class="time__container" v-for="(item, i) in time" :key="i">
          <b
            fz-12
            class="time__t"
            :class="{ 'time__t--active': item['active'] }"
            >{{ item["t"] }}</b
          >
          <div
            class="time__status"
            :class="{ 'time__status--active': i == active }"
            @click="active = i"
          >
            {{ item["status"] }}
          </div>
        </div>
      </div>
    </Magazine>
    <!-- 活动开始倒计时 -->
    <div class="line" d-flex-center px-10 mt-10 style="justify-content: center">
      <div class="line__text">
        <span mr-2>活动开始倒计时还有</span>
        <span px-1 py-1 bg-drak mr-2 bor-3 text-tertiary>02</span>:
        <span px-1 py-1 bg-drak mr-2 bor-3 text-tertiary>35</span>:
        <span px-1 py-1 bg-drak bor-3 text-tertiary>37</span>
      </div>
    </div>
    <!-- 商品列表 -->
    <Goods :list="fastBuyGoods"></Goods>
    <Fastnav></Fastnav>
  </div>
</template>

<script setup lang="ts">
import { getHotGoods, getFastBuyGoods } from "@/api/promotion";
import BoxSkin from "@/components/box-skin/BoxSkin.vue";
import Magazine from "@/components/magazine/Magazine.vue";
import Goods from "@/common/goods.vue";
import Fastnav from "@/common/fastnav.vue";

import { onMounted, ref, reactive } from "vue";
const hotGoodList = ref([]);
const fastBuyGoods = ref([]);
const time = [
  {
    t: "00:00",
    status: "未开抢",
    active: true,
  },
  {
    t: "03:00",
    status: "未开抢",
  },
  {
    t: "06:00",
    status: "未开抢",
  },
  {
    t: "09:00",
    status: "未开抢",
  },
  {
    t: "12:00",
    status: "未开抢",
  },
  {
    t: "15:00",
    status: "未开抢",
  },
  {
    t: "18:00",
    status: "未开抢",
  },
  {
    t: "21:00",
    status: "未开抢",
  },
  {
    t: "24:00",
    status: "未开抢",
  },
];
const active = ref(0);

onMounted(() => {
  getHotGoods().then((res) => {
    hotGoodList.value = res.data;
  });
  getFastBuyGoods({ time: 100000 }).then((res) => {
    fastBuyGoods.value = res.data;
  });
});
</script>

<style scoped lang="scss">
@include b(fast-buy) {
  width: 100%;
  @include e(header) {
    background: url("https://s10.mogucdn.com/mlcdn/c45406/201103_154d6c9b491c6d29af5l9a5487h6i_750x225.png")
      no-repeat top center / contain;
    // background-size: 100% 100%;
    @include e(desc) {
      border-radius: 30px 17px 17px 0/30px 17px 17px 0;
      background-color: #fff;
      color: #ff5777;
    }
    @include e(sell) {
      position: absolute;
      bottom: 5px;
      left: -5px;
    }
    @include e(price) {
      color: #ff5777;
    }
    @include e(oldprice) {
      color: #999;
      text-decoration: line-through;
    }
  }
}
@include b(time) {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  @include e(container) {
    @include box-center;
    flex-direction: column;
    flex-shrink: 0;
    @include dimensions(100px, 50px);
    scroll-snap-align: center;
  }

  @include e(t) {
    font-size: 14px;
    opacity: 0.8;
    color: #fff;
    @include m(active) {
      opacity: 1;
    }
  }

  @include e(status) {
    @include dimensions(60px, 20px);
    line-height: 20px;
    border-radius: 20px;
    @include box-center;
    color: #fff;
    opacity: 0.8;
    @include m(active) {
      opacity: 1;
      background-image: linear-gradient(-126deg, #f7e6d4 7%, #fdd09f);
      color: #cd2123;
    }
  }
}
@include b(line) {
  position: relative;
  @include e(text) {
    z-index: 1;
    background-color: #f1f1f1;
    padding: 0 7px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    height: 1px;
    transform: translate(-50%, -50%);
    background-color: #999;
  }
}
</style>
